<template>
	<view class="workbench-container">
		<!-- 快捷菜单部分 -->
		<view class="menu-section">
			<view class="section-title">快捷菜单</view>
			<view class="menu-grid">
				<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @tap="handleMenuClick(item)">
					<image class="menu-icon" :src="item.icon" mode="aspectFill"></image>
					<text class="menu-text">{{item.title}}</text>
				</view>
			</view>
		</view>
		
		<!-- 待处理事项部分 -->
		<view class="todo-section">
			<view class="section-title">待处理事项</view>
			<view class="todo-list" v-if="todoList.length > 0">
				<view class="todo-item" v-for="(item, index) in todoList" :key="index" @tap="handleTodoClick(item)">
					<view class="todo-left">
						<view class="todo-title">{{item.title}}</view>
						<view class="todo-desc">{{item.description}}</view>
					</view>
					<view class="todo-right">
						<view class="todo-time">{{item.time}}</view>
						<view class="todo-status" :class="item.status === '紧急' ? 'status-urgent' : 'status-normal'">{{item.status}}</view>
					</view>
				</view>
			</view>
			<view class="empty-todo" v-else>
				<image class="empty-icon" src="/static/img/empty.png" mode="aspectFill"></image>
				<text class="empty-text">暂无待处理事项</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuItems: [
				{ title: '日程安排', icon: '/static/workbench/calendar.png', url: '/pages/schedule/index' },
				{ title: '任务分配', icon: '/static/workbench/task.png', url: '/pages/task/index' },
				{ title: '文件管理', icon: '/static/workbench/file.png', url: '/pages/file/index' },
				{ title: '会议预约', icon: '/static/workbench/meeting.png', url: '/pages/meeting/index' },
				{ title: '考勤打卡', icon: '/static/workbench/attendance.png', url: '/pages/attendance/index' },
				{ title: '请假申请', icon: '/static/workbench/leave.png', url: '/pages/leave/index' },
				{ title: '报销申请', icon: '/static/workbench/expense.png', url: '/pages/expense/index' },
				{ title: '通知公告', icon: '/static/workbench/notice.png', url: '/pages/notice/index' },
				{ title: '工作报告', icon: '/static/workbench/report.png', url: '/pages/report/index' },
				{ title: '客户管理', icon: '/static/workbench/customer.png', url: '/pages/customer/index' },
				{ title: '项目管理', icon: '/static/workbench/project.png', url: '/pages/project/index' },
				{ title: '数据统计', icon: '/static/workbench/statistics.png', url: '/pages/statistics/index' },
				{ title: '更多功能', icon: '/static/workbench/more.png', url: '/pages/more/index' },
				{ title: '设置', icon: '/static/workbench/setting.png', url: '/pages/setting/index' },
				{ title: '帮助', icon: '/static/workbench/help.png', url: '/pages/help/index' },
			],
			todoList: [
				{
					title: '项目周报提交',
					description: '请于今日18:00前提交本周项目进度报告',
					time: '2023-06-15 18:00',
					status: '紧急'
				},
				{
					title: '客户需求评审会议',
					description: '与技术部门讨论新客户需求实现方案',
					time: '2023-06-16 10:00',
					status: '普通'
				},
				{
					title: '合同审批',
					description: '新客户合同需要您审批',
					time: '2023-06-17 12:00',
					status: '普通'
				},
				{
					title: '团队建设活动',
					description: '本周五下午团队建设活动，请准时参加',
					time: '2023-06-18 14:00',
					status: '普通'
				}
			]
		}
	},
	methods: {
		handleMenuClick(item) {
			this.$comm.nav_to(item.url, item.title);
		},
		handleTodoClick(item) {
			// 处理待办事项点击
			uni.showToast({
				title: '您点击了：' + item.title,
				icon: 'none'
			});
		},
		getTodoList() {
			// 从服务器获取待处理事项
			this.$boya.NGet('/app/workbench/todo', null, (res) => {
				if (res.code === 200 && res.data) {
					this.todoList = res.data;
				}
			});
		}
	},
	onLoad() {
		// 获取待处理事项
		this.getTodoList();
	}
}
</script>

<style>
.workbench-container {
	padding: 20rpx;
	background-color: #f5f5f5;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	margin: 20rpx 0;
	color: #333;
}

/* 快捷菜单样式 */
.menu-section {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.menu-grid {
	display: flex;
	flex-wrap: wrap;
}

.menu-item {
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0;
}

.menu-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.menu-text {
	font-size: 24rpx;
	color: #333;
}

/* 待处理事项样式 */
.todo-section {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
}

.todo-item {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.todo-left {
	flex: 1;
}

.todo-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.todo-desc {
	font-size: 24rpx;
	color: #666;
}

.todo-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-left: 20rpx;
}

.todo-time {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.todo-status {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.status-urgent {
	background-color: #ffebeb;
	color: #ff4d4f;
}

.status-normal {
	background-color: #e6f7ff;
	color: #1890ff;
}

.empty-todo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
}

.empty-icon {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style> 